import React, { FC } from 'react'
import Link from 'next/link'
import dayjs from 'dayjs'
import PostType from '@/types/post'

export type PostItemProps = {
  post: PostType
}

export const PostItem: FC<PostItemProps> = ({ post }) => {
  const { slug, title, excerpt, date } = post
  return (
    <div className="flex flex-col flex-wrap">
      <Link href={`posts/${slug}`}>
        <a className="space-y-2">
          <h3 className="text-2xl">{title}</h3>
          <p>{excerpt}......</p>
          <p className=" text-right text-gray-700">
            {dayjs(date).format('YYYY-MM-DD')}
          </p>
        </a>
      </Link>
    </div>
  )
}

export type PostsProps = {
  posts: PostType[]
}

const Posts: FC<PostsProps> = ({ posts }) => (
  <ol className="space-y-8">
    {posts.map((post) => (
      <li key={post.slug}>
        <PostItem post={post} />
      </li>
    ))}
  </ol>
)

export default Posts
